<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../Public/js/first/first.js"></script>
<title>最爱</title>
<style>
a{
	text-decoration: none;
    font-family:'黑体';
    letter-spacing:1px;
    color:#7f7f7f;
    font-size:11pt;
	}
div{
	margin:0px;
	margin-left:auto;
	margin-right:auto;
		/*border:thin;border-color:#Ff0000; */
	}
body {
	height:298px;
	background:#ffffff;
	margin:0px;	
	margin-left:2%;
}

input{
	background:#f2fbfe;
	}

.button_t{
	background:no-repeat left center;
	height:inherit;
	float:left;
	cursor:pointer;
	}
.right_box{
	width:85%;
	}	
.item{
    font-size:11pt;
    cursor:pointer;
    color: blue;
}
.firstbutton{
    cursor:pointer;
    color:#6c6c6c;
    margin:10px 10px 0px 0px;
}
 .options{
	height:30px;
	width:170px;
	border-bottom:dotted #e3e3e3 1px;
	cursor:pointer;
	}
 .myfontstyle{
    font-family:'黑体';
    letter-spacing:1px;
    font-size:10pt;
}
</style>
<script type="text/javascript">
 function selectitem(index){
   switch(index){
    case 0:
    window.location.href="{:U('Public/tohome')}"
    break;
    case 1:
    window.location.href="{:U('Upload/uploadpicture')}"
    break;
    case 2:
    window.location.href="{:U('Note/addBlog')}"
    break;
    case 3:
    window.location.href="{:U('First/Index')}"
    break;
    case 4:
    window.location.href="{:U('Favorite/Index')}"
    break;
    case 5:
    window.location.href="{:U('Video/addVideo')}"
    break;
    case 6:
    window.location.href="{:U('Growth/Index')}"
    break;
    case 7:
    window.location.href="{:U('Timeshow/Index')}"
    break;
   }
}



function senddata(){
    var username=$("#username").val();
  if($("#itemtext").val()!==''){
    var item=$("#itemFlag").val();
    var content=$("#itemtext").val();
    var currentflag=$("#currentflag").val();
    $.post("addFavorite",{item:item,content:content,flag:currentflag},function(data){
         var obj=$.parseJSON(data); 
          var fid=obj.data;
        //  $("#itemul").append("<li style='margin:6px;' id="+fid+"><span style='color:red'>"+username+"</span> 最喜爱的 <span style='color:red' id=item_"+fid+">"+item+"</span> 是"+content+"<div style='float:right;margin-right:20px;background:url(../Public/images/first/delete.png) no-repeat;width:18px;height:18px;' onclick='delitem("+fid+")'></li>");
         $("#itemFlag").val('');
          $("#itemtext").val('');
          //隐藏添加成功的item
         var itemId= $("#currentId").val();
          $("#"+itemId).hide(500);
          getAjaxData();
    });
  }  
}

function getflag(id){
     $.post('getflag',{id:id},function(data){
    
   var jsonObj=$.parseJSON(data);
  
   var itemName=jsonObj.info.event;
   $("#itemFlag").val(itemName);
   $("#currentId").val(id);
   
    $("#"+id).css("color","red");
    
 });   
    
}

function getflags(flag){
    document.getElementById("itemFlag").setAttribute("readonly","readonly");   
   $("#items").hide(500);
   $("#currentflag").val(flag);  
  $.post("getotherflags",{flag:flag},function(data){
   
     var jsonObj=$.parseJSON(data);
      $("#items").show(1000);
      $("#items").html("");
     $("#items").html("<div id='itemsul' style='list-style: decimal;margin:10px;'></div>");
     var flaglist=jsonObj.data;
    
     for(var i=0;i<flaglist.length;i++){
  $("#itemsul").append("<div style='float: left;list-style:none;margin: 10px;'><a href='#' onclick='getflag("+flaglist[i].id+")' id='"+flaglist[i].id+"'>"+flaglist[i].event+"</a></div>");
    }
  });  
    
}
function delitem(id){
    var recoverItem=$("#item_"+id).text();
   
  $.get("delFavorite",{id:id},function(data){
   
   $("#"+id).hide(1000);
  appendflag(recoverItem);
  });
   
}
function appendflag(recoverItem){
    
   $.get("getflagByEvent",{recoverItem:recoverItem},function(data){
   
     var jsonObj=$.parseJSON(data);
     getAjaxData();
     var item_id=jsonObj.data.id;
    $("#"+item_id).show(500);
   
    
   });  
}
function getAjaxData(){
     var username=$("#username").val();
 $.post("getAjaxFavorite",{},function(data){
   var jsonobj=$.parseJSON(data); 
   var page=jsonobj.data.page;
   $("#page").html(page);
   var list=jsonobj.data.list;
   $("#itemul").html("");
   for(var i=0;i<list.length;i++){
    $("#itemul").append("<div class='myfontstyle' style='margin:6px;' id="+list[i].id+"><span style='color:#047f80'>"+username+"</span> 最喜爱的 <span style='color:#047f80' id=item_"+list[i].id+">"+list[i].item+"</span> 是<span style='color:#047f80'>"+list[i].content+"</span><input type='button' value='删除' onclick='delitem("+list[i].id+")'></div>");
   }
 
 });  
    
}
function selfdefine(){
   $("#currentflag").val("selfdefine");   
 //$("#itemText").removeAttribute("readonly");
 document.getElementById("itemFlag").removeAttribute("readonly");
 
 $("#items").html("<p color='red'>现在您可以在输入框中直接输入您的自定义内容</p>");
}
</script>

</head>

<body>
<input type="hidden" name="currentId" id="currentId" value="" />
<input type="hidden" name="currentflag" id="currentflag" value="bborn" />
<input type="hidden" name="itemName" id="itemName" value="" />
<input type="hidden" name="username" id="username" value="{$username}"/>
<div style="width:100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td  style="width:65%;height:30px;" ></td>
    <td  style="width:7%;" rowspan="3"><div style="float:left;width:100%;background:url(../Public/images/first/m_line.png) no-repeat center center;height:350px; "></div></td>
    <td  style="width:28%;">
    </td>
  </tr>
  <tr>
   <td rowspan="3" valign="top">
<div style="margin-left:2%;width:97%; background:#ecf8fe; border:#dbdcdd thin solid; height:580px; float:left;">
  <div style='float:left;background:#d8f2fe; border:#dbdcdd thin solid;border-left:none;border-right:none;width:100%;height:40px;text-align:center;'>
  <div id="bborn" class="button_t" style="margin-left:20px;background-image:url(../Public/images/first/example.png); width:102px;" onclick="getflags('bborn')"></div>
   <div id="custom" class="button_t" style="margin-left:20px;background-image:url(../Public/images/first/custom.png);width:84px;" onclick="selfdefine()"></div>
  </div>
 <div style="float:left;width:90%;padding-bottom:10px;height:120px">
   <div id="items" style="width:100%;margin-left: 15px;">
  <volist name="flags" id="flag">
    <div id="" style="float: left;list-style:none;margin:10px;color:#A0A0A0"><a href="#" onclick="getflag({$flag.id})" id="{$flag.id}">{$flag.event}</a></div>
   </volist>
   </div>
 </div>

<div class="content" style='clear:both;background:#d8f2fe; border:#dee4e3 thin solid;border-left:none;border-right:none;width:100%;height:40px;text-align:left;'><a style="line-height:40px;font-size:9pt;color:#6c6c6c;margin-left:20px; font-weight:bold;">从上面的列表中选择一个里程碑</a></div>
   <div  class="myfontstyle" id="ficontent" style="width:90%;height:60px;margin-top:20px;"><p id="ficontentText" style="color: #6c6c6c;font-size: 12pt;"></p><div id="paishouInput">
   <span style="color:#047f80;">{$username} </span>最喜爱的<input type="text" id="itemFlag" name="itemFlag" readonly="readonly"/>是<input type="text" name="itemtext" id="itemtext" />
      <input type="button" value="保存" onclick="senddata()"/>
   </div> </div>
   
 
   <div style="margin-top: 10px;margin-left:20px;" id="itemul" >   
  
   <volist name="favoriteList" id="favorite">
    <div class="myfontstyle" style='margin:10px' id="{$favorite.id}"><span style='color:#047f80'>{$username} </span>最喜爱的<span style='color:#047f80' id="item_{$favorite.id}">{$favorite.item}</span> 是<span style='color:#047f80'>{$favorite.content}</span><div style="float:right;margin-right:20px;background:url(../Public/images/first/delete.png) no-repeat;width:18px;height:18px;" onclick='delitem({$favorite.id})'></div></div>  
 </volist> 

   
   </div>
   <div class="myfontstyle" id="page" style="width:200px;height:20px;">{$page}</div>
    </div>
</td>
<td  style="width:28%;font-size:9pt; text-align:left;height:30px;" valign="top">    
    <div style="float:left;width:90%;">
	  <div style="background:url(../Public/images/first/back1.png) no-repeat;width:207px;height:214px;padding-top:50px;">
    <!--	<div class="myfontstyle" style="width:80%;color:#A0A0A0;font-size:10pt;">&nbsp;&nbsp; 萝卜白菜，各有所爱，宝宝也不例外，每一个宝宝都有不同的喜好，将它们记录在Tang最爱,让志趣相投的宝宝们成为更好的朋友。亲友也来这里了解宝宝的最爱，他们终于不用再发愁该送宝宝什么礼物了。
        </div>-->
      </div>
    </div>


    
    <div class='right_box' style="height:10px;background:url(../Public/images/first/v_line.png) bottom left repeat-x;float:left;">
    </div>
    <div  id="role" style="width:70%;clear:both;">
    	<div class="options" style="background:url(../Public/child/image/home.png) no-repeat;" onclick="selectitem(0)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addphoto.png) no-repeat;" onclick="selectitem(1)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addvideo.png) no-repeat;" onclick="selectitem(5)"></div>	
    	<div class="options" style="background:url(../Public/child/image/marker.png) no-repeat;" onclick="selectitem(3)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addfavourite.png) no-repeat;" onclick="selectitem(4)"></div>	
    	<div class="options" style="background:url(../Public/child/image/addnote.png) no-repeat;" onclick="selectitem(2)"></div>	
    	<div class="options" style="background:url(../Public/child/image/grow.png) no-repeat;" onclick="selectitem(6)"></div>	
    	<div class="options" style="background:url(../Public/child/image/timeshow.png) no-repeat;" onclick="selectitem(7)"></div>	
    </div>
</td>
  </tr>
  
</table>

</div>
<img src="../Public/images/first/firstflower.png" style="position:absolute;right:0;bottom:0; z-index:-50;" />
</body>
</html>